<template>
	<div v-if="user" v-my-directive data-title="用户中心" class="usermain">
		<!-- 左边 -->
		<userleft></userleft>
		<div class="CatalogLayout">
			<!-- 引入文件的方式 -->
			<div class="Genericpadding bold">我的收藏</div>
			<div class="Genericpadding helf CatalogLayout">
				<el-radio-group v-model="radio" @change=";(curPage = 1), (loading = true), (aclist = false), actr()" style="margin-bottom: 20px" class="center">
					<el-radio-button label="post">帖子</el-radio-button>
					<el-radio-button label="qa">问答</el-radio-button>
				</el-radio-group>
				<ul v-if="radio == 'post'" v-loading="loading" class="columnLayout">
					<li v-if="aclist" v-for="(item, index) in aclist" :key="index" class="courselist comullist">
						<el-image class="PostThumbnails" :src="item.thumbnail ? item.thumbnail : ''" lazy>
							<template #error>
								<div class="image-slot iconfont icon-jiazaitupian"></div>
							</template>
						</el-image>
						<div class="ArticleList" style="flex: 1">
							<div class="Horizontalspacing minixgap ArticleTitlep">
								<el-tag effect="plain" size="small">热门</el-tag>
								<span class="turngreen Widthlimit">{{ item.title }}</span>
							</div>
							<span class="minfont grey Widthlimits">{{ item.description }}</span>
							<div class="articlebt minfont">
								<div class="Horizontalspacing interval">
									<div class="Horizontalspacing minixgap">
										<el-avatar class="pimgmins" :src="item.user.Avatar">
											<div class="image-slots iconfont icon-setting-role"></div>
										</el-avatar>
										<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
										<span v-else class="center">{{ item.user.username }}</span>
									</div>
									<div class="left grey center">{{ item.pidname }}</div>
								</div>
								<div class="Horizontalspacing interval grey">
									<div class="Horizontalspacing minixgap">
										<span class="left center">{{ $t('message.DATE') }}</span>
										<span class="center">{{ item.Creationtime }}</span>
									</div>
									<div class="left Horizontalspacing minixgap">
										<span class="center">{{ $t('message.like') }}:</span>
										<span class="center">{{ item.Like.length }}</span>
									</div>
									<div class="left Horizontalspacing minixgap">
										<span class="center">{{ $t('message.View') }}</span>
										<span class="center">{{ item.PageView }}</span>
									</div>
								</div>
							</div>
						</div>
					</li>
					<el-pagination background class="centerend" :hide-on-single-page="value" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
				</ul>
				<!-- 问答 -->
				<ul v-if="radio == 'qa'" v-loading="loading" class="columnLayout">
					<li v-for="(item, index) in qaaclist" :key="index" class="qzlist qzlistgrid minxgap">
						<div :class="[item.reply.length > 0 ? 'Green' : 'grey', item.reply.length > 0 ? 'QAbox' : 'QAboxno']">
							<div class="columnLayout"
								><span class="center">{{ item.reply.length }}</span
								><span class="center">回答</span>
							</div>
						</div>
						<div class="columnLayout space-around">
							<router-link :to="'/qaarticle/' + item.alias + '/' + item.id"
								><div class="turngreen qztitle">{{ item.title }}11111111111111111111111111111111111111111111111111111</div></router-link
							>
							<div class="articlebt minfont grey line">
								<div class="Horizontalspacing minaxgap">
									<div class="Horizontalspacing minixgap">
										<el-avatar class="pimgmins" :src="item.user.Avatar">
											<div class="image-slot iconfont icon-setting-role"></div>
										</el-avatar>
										<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
										<span v-else class="center">{{ item.user.username }}</span>
									</div>
									<div class="center left">{{ item.pidname }}</div>
									<div class="Horizontalspacing minixgap left">
										<div class="iconfont icon-riqi_o"></div>
										<span class="center">{{ item.Creationtime }}</span>
									</div>
									<div class="Horizontalspacing minixgap">
										<div class="iconfont icon-icon"></div>
										<span class="center">{{ item.PageView }}</span>
									</div>
									<div class="left Horizontalspacing minixgap" v-if="item.Price > 0">
										<div class="iconfont icon-dashangcishu red"></div>
										<span class="center Horizontalspacing">
											<p>悬赏</p>
											<p class="red">{{ item.Price }}</p>
											<p>元</p>
											<p v-if="item.optimal">已解决</p>
										</span>
									</div>
								</div>
								<!-- 有最佳答案才显示 -->
								<router-link class="center qavwpc" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦，进来学习一下吧~</router-link>
								<router-link class="center qavw" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦</router-link>
								<router-link class="center Illanswer" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-else>我来回答</router-link>
							</div>
						</div>
					</li>

					<el-pagination background class="centerend" :hide-on-single-page="value" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import userleft from './../components/userleft'
	import { dataRequest as api } from '@/api/api'
	import { mapState } from 'vuex'
	export default {
		name: 'name',
		components: {
			// 组件
			userleft,
		},
		computed: {
			...mapState(['logon', 'user']),
			mapboxMap1() {
				// return this.$store.state.mapbox.map;

				return this.user
			},
		},
		data() {
			return {
				//返回值
				// 选项卡
				radio: 'post',
				//获取文章
				loading: true,
				value: true,
				curPage: 1,
				pagesize: 10, //每页显示数量
				total: 0,

				//返回值
				userid: '',
				offset: 'DESC',
				tosort: 'time',
				aclist: false,
				qaaclist: false,
			}
		},
		methods: {
			// 函数
			async actr() {
				console.log('1')
				let get = ''
				let array
				if (this.radio == 'post') {
					// 文章
					// 用作切换什么
					array = await api(['getarticlepage' + get, { collect: this.userid, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
					this.loading = false
					if (array.code == 200) {
						this.aclist = array.data
					}
				} else {
					// 问答
					array = await api(['getquestionpage' + get, { collect: this.userid, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
					this.loading = false
					if (array.code == 200) {
						console.log(array)
						this.qaaclist = array.data
						for (const key in this.qaaclist) {
							this.qaaclist[key].Price = (Math.round(this.qaaclist[key].Price * 1000) / 1000).toString()
						}
					}
				}
				if (array.code == 200) {
					this.total = array.massage / 1
				}
			},

			// fenye
			page(ele) {
				this.loading = true
				this.curPage = ele
				this.actr()
			},
		},
		mounted() {
			// 生命周期:
			if (this.user) {
				this.userid = this.user.id
				this.actr()
			}
		},
		watch: {
			mapboxMap1(newData, oldData) {
				if (newData) {
					this.userid = newData.id
					this.actr()
				}
			},
		},
		updated() {
			window.scrollTo({ behavior: 'instant', top: 0 })
		},
	}
</script>
<style scoped>
	.courselist {
		display: flex;
		flex-direction: row;
		gap: 10px;
	}
	.Widthlimit {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 设置最大显示行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		width: 566px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.Widthlimits {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4; /* 设置最大显示行数 */
		max-height: 89px;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 600px; /* 设置容器宽度 */
		white-space: normal; /* 允许换行 */
	}
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		height: 150px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.image-slots {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px;
		height: 20px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 15px;
	}
	@media screen and (max-width: 860px) {
		.courselist {
			gap: 0.1rem;
		}
		.Widthlimit {
			width: 1.8rem;
		}
		.Widthlimits {
			display: none;
		}
		.image-slot {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 1rem;
			height: 0.75rem;
			background: var(--el-fill-color-light);
			color: var(--el-text-color-secondary);
			font-size: 0.15rem;
		}
	}
</style>
<style scoped>
	.qavwpc {
		display: block;
	}
	.qavw {
		display: none;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
	.newsrow {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.qztitle {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 747px;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.newsrow {
			justify-content: space-between;
			gap: 0.1rem;
		}
		.qznav {
			width: 100vw;
		}
		.qztitle {
			width: 2.62rem;
		}
		.questionnav {
			height: 1.22rem;
		}
		.qavwpc {
			display: none;
		}
		.qavw {
			display: block;
		}
	}
</style>
